import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'

// Message({
//   message: '你错了么',
//   type: 'error'
// })
// Message.success('恭喜')
// Message.error('你错了')

// 这种原始的方式是没有问题的
// axios.defaults.baseURL = 'http://www.jd.com'
// axios({
//   method: 'get',
//   url: '/api/user/123'
// })
// axios({
//   method: 'post',
//   url: '/login'
// })

// 还有一种更好用的方式, 创建实例发送请求, => 更加灵活, 根据你的实际业务需求创建n个实例
// const p = new Person()
// 创建axios实例, 为了将来发送请求
// const http = axios.create({
//   // 设置axios实例的基地址
//   baseURL: 'http://www.jd.com'
// })
// http({
//   method: 'get',
//   url: '/api/user'
// })
// http({
//   method: 'get',
//   url: '/api/user'
// })

// const http2 = axios.create({
//   baseURL: 'http://www.jd2.com'
// })

// http2({
//   method: 'get',
//   url: '/api/sx'
// })

// 创建axios实例,
const http = axios.create({
  // 将来 开发 - 测试 - 上线,  对应发送请求的后端服务器地址, 手动切换 => 麻烦,自动切换,  环境变量
  // process.env 获取环境变量
  // process.env.VUE_APP_BASE_API
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 5000 // request timeout
})

// 将来要自己写请求响应拦截器()
// 请求拦截器就是在请求之前 做一些公共的配置(加token)
// 响应拦截器是在响应回来之前, 做一些统一的处理    res.data  解套

// 添加请求拦截器
http.interceptors.request.use(function(config) {
  // 在发送请求之前做些什么
  // 可以在这里给所有的请求统一添加token
  const token = store.getters.token
  if (token) {
    config.headers.Authorization = 'Bearer ' + token
  }

  return config
}, function(error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
// 处理那种 请求成功且操作失败 (200 但是success:false)
http.interceptors.response.use(function(response) {
  // 正常响应(200), 就会走上面这个响应拦截器代码
  const res = response.data
  // console.log(response, 999888)
  const { message, success } = res
  if (success === false) {
    //  请求成功且操作失败 (200 但是success:false) ==> 希望将来的代码走.catch

    // 对于这种情况, 统一给个错误提示
    // this.$message() => 不行
    Message.error(message)

    // 如果将来的代码要走.catch => 这里要的返回一个失败的promise!!!
    // return new Promise((resolve, reject) => {
    //   reject(12)
    // })

    // 优雅一点  Promise.reject() 快速创建一个失败的promise
    return Promise.reject(new Error(message))
  }

  // 对后端响应的数据 解套一层 => res.data
  return res
}, function(error) {
  // 服务器崩了(401, 404, 500)就会走下面这个响应拦截器代码
  // 对响应错误做点什么
  console.dir(error, 1999)
  if (error.response.status === 401 && error.response.data.code === 10002) {
    // token有问题 => token过期 => 清token+清个人信息 + 重新登录
    // this.$store.dispatch
    // 定制化的提示
    Message.error('您的登录已经过期, 请重新登陆')
    store.dispatch('user/logout')
    // this.$router.push('/login')
    router.push('/login')
  } else {
    // 统一处理服务器错误的提示
    Message.error(error.message)
  }

  return Promise.reject(error)
})

export default http
